<template>
    <!-- 搜索 -->
    <van-nav-bar class="search" fixed>
        <van-button
            class="search-btn"
            slot="left"
            type="info"
            size="small"
            round
            icon="search"
            @click.native="$router.push('/search')"
            >请输入搜索关键词</van-button
        >
        <div slot="right" class="chacao-icon">
            <div class="scan" v-if="activeId < 3">
                <van-icon name="scan" />
                <span>扫一扫</span>
            </div>
            <div class="label" v-else>
                <span>科幻</span>
                <span>喜剧</span>
                <!-- path:`/selection`,
                    query:{
                        id:activeId+1 -->
                <i
                    class="iconfont icon-shaixuan"
                    @click="
                        $router.push({
                           path: '/selection',
                            query: {
                                id: activeId + 1
                            }
                        })
                    "
                ></i>
            </div>
        </div>
    </van-nav-bar>
</template>

<script>
export default {
    props: {
        activeId: {
            type: [Number, String],
            required: true
        }
    }
};
</script>
<style scoped lang="scss">
.search {
    position: fixed;
    left: 0;
    right: 0;
    top: 78px;
}
.search-btn {
    width: 555px;
    height: 50px;
    background-color: #e5e5e5;
    border: none;
    font-size: 28px;
    /deep/.van-icon {
        color: #fff !important;
    }
}
/deep/.van-nav-bar__left {
    padding: 0 0.14rem;
    width: 70%;
}
/deep/.van-nav-bar__right {
    padding: unset;
    width: 200px;
}
.chacao-icon {
    text-align: center;
    width: 100%;
    /deep/.van-icon {
        font-size: 50px;
        color: #ff9800;
        right: 20px;
    }
    .scan {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .label {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
}
.icon-shaixuan {
    font-size: 38px;
}
</style>
